<template>
	<view class="contain">
		<view class="tabs">
			<u-tabs 
				:list="list1" 
				@click="tabsClick" 
				lineColor="#FE7D01"
				:itemStyle="{'width':'100px','height':'44px'}" 
				lineWidth="70" 
				:activeStyle="{'color':'#FE7D01' }">
			</u-tabs>
		</view>
		<!--
		type	优惠券是否过期	Boolean	false	true
		pirce	优惠券金额	String	true	-
		title	优惠券标题	String	注册有礼	-
		timeOpen	优惠券有效期开始时间	String	无	-
		timeEnd	优惠券有效期开始时间	String	无	-
		typeTitle	按钮标题	String	立即使用	-
		subTitle	底部文本	String	通用优惠券
		-->
		<block v-if="!isExpired" >
			<view v-for="item in [1,2,3]" style="margin-bottom:30rpx;">
				<TXm-Coupon @click="click" :pirce="11*item" timeOpen="2023-05-15" timeEnd="2023-05-15" ></TXm-Coupon>
			</view>
		</block>
		<block v-else>
			<view v-for="item in [1,2]" style="margin-bottom:30rpx;">
			 <TXm-Coupon @click="click" :type="true" title="购买返利" subTitle="用户下单后自动发券" :pirce="13*item" timeOpen="2023-05-15" timeEnd="2023-05-15" ></TXm-Coupon>
			</view>
		</block>
	</view>
</template>

<script setup lang='ts'>
	import { ref,reactive } from 'vue'
	const isExpired=ref(false);
	const list1= reactive([{name:'已领取'},{name:'未领取'}]);
	const click=(flag:boolean)=>{
		uni.$tools.toast("点击事件");
	}
	const tabsClick=(e:any)=>{
		console.log(e);
		if(e.index===0) {
			isExpired.value=false;
		}
		if(e.index===1) {
			isExpired.value=true;
		}
	}
</script>

<style lang='scss' scoped>
	@import "shop_coupon.scss";
</style>